<template>
    <div>
        <el-dialog title="一张图" @close="onWrapperClose" :visible="visible" width="1200px" height="650px" :v-if="visible">
            <div class="checkbox-bg">
                <el-checkbox-group @change="onCheckboxChange" v-model="checkedArr">
                    <el-checkbox-button v-for="(item,index) in checkList" :label="item.label" :key="index">{{item.label}}</el-checkbox-button>
                </el-checkbox-group>
            </div>
            <div class="search-wrapper">
                <div class="search-row">
                    <div class="input-row">
                        <input class="search-input" v-model="keywords" placeholder="请输入..." type="text">
                        <div class="search-btn-row">
                            <button @click="search" class="search-btn">
                                <img class="search-img" src="../../assets/search.png" alt="">
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ex-box">
                <ul class="ex-ul">
                    <li v-for="(item,index) in exList" class="ex-li" :key="index">
                        <img :src="item.icon" alt="">
                        <span>{{item.label}}</span>
                    </li>
                </ul>
            </div>
            <div class="tool-box">
                <ul class="tool-wrapper">
                    <li v-for="(item,index) in toolList" :key="index" @click="onTool(item)" class="tool-img-list">
                        <img :src="require(`../../assets/dp1/${item.url}.png`)" alt="">
                    </li>
                    <li @click="onTool('circle')" class="tool-img-list">
                        <div class="tool-circle"></div>
                    </li>
                </ul>
            </div>
            <div id="sjrhMap" class="map-bg">

            </div>

            <!-- <ul class="type-swtich">
            <li v-for="(item,index) in typeList" :key="index" class="relative">
                <div class="type-row">
                    {{item.name}}
                    <div @click="toggleType(item,index)" class="switch-wrapper">
                        <div class="switch-comp" :class="{checked:index==currentTypeIndex}">
                            <div class="switch-circle"></div>
                        </div>
                    </div>
                </div>
                <div></div>
                <img src="../../assets/dp1/switch-bg.png" alt="">
            </li>
        </ul> -->
        </el-dialog>
        <el-dialog title="基础数据" :visible="detailVisible" @close="detailVisible = false;isShowCz = false;">
            <el-tabs v-model="activeTab" @tab-click="tabClick" type="border-card">
                <el-tab-pane v-for="(item,index) in detailOption" :key="index" :name="item.label" :label="item.label">
                    <div @click="docClick" class="detail-wrapper" v-if="item.type == 'table'">
                        <div class="">
                            <div class="item-center">
                                <label>姓名：</label>
                                <div class="search-input-row">
                                    <input placeholder="请输入" type="text">
                                    <button v-on:click="onSearch(item)" class="search-btn">搜索</button>
                                    <button v-on:click="onReset(item)" class="reset-btn">重置</button>
                                </div>
                            </div>
                            <div class="item-center m-t-10">
                                <label>村组：</label>
                                <div class="relative cz-wrapper">
                                    <div class="selected-cz" :class="{'show-cz-bottom':isShowCz}" @click="selectCz">
                                        {{ cz?`${xz}/${cz}`:"请选择村组" }}

                                    </div>
                                    <div class="selected-cz-ul" :class="{'show-cz':isShowCz}">
                                        <div class="flex selected-sub">
                                            <div @click="onCzTab(index)" v-for="(item,index) in czTabList" :key="index" :class="{'active-tab':index==currentTabIndex}" class="xz-title ">{{item.label}}</div>
                                        </div>
                                        <ul class="xz-ul">
                                            <li @click="onXzList(item,index)" v-for="(item,index) in currXzList" :key="index" :class="{'active-title':(item.name == cz || item.name == xz)}" class="xz-li">{{item.name}}</li>
                                            <div v-if="currXzList.length == 0" class="no-list">请先选择乡镇</div>
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <el-table :data="getTableData(item.tableData)">
                            <el-table-column :formatter="item.formatter" v-for="(item, key, index) in item.config" :key="index" align="center" :prop="item.prop" :label="item.label" show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                    </div>

                    <div v-else>
                        <el-row :gutter="24" class="area-row">
                            <el-col :span="12">
                                <span>乡镇名称：</span>
                                <span>{{currAreaData.name}}</span>
                            </el-col>
                            <el-col :span="12">
                                <span>下辖村组：</span>
                                <span>{{currAreaData.areaNum}}个</span>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24" class="area-row">
                            <el-col :span="12">
                                <span>总人口数：</span>
                                <span>{{currAreaData.populationNum}}人</span>
                            </el-col>
                            <el-col :span="12">
                                <span>总党员数：</span>
                                <span>{{currAreaData.partyNum}}人</span>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24" class="area-row">
                            <el-col :span="12">
                                <span>总房屋数：</span>
                                <span>{{currAreaData.houseNum}}套</span>
                            </el-col>

                        </el-row>

                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
        <el-dialog title="天网视频" :visible="twVisible" width="640px" @close="twVisible = false">
            <video controls="controls" :src="twUrl" width="590" height="300">
            </video>
        </el-dialog>
        <CgDetail/>
    </div>
</template>

<script>
const spIcon = require("../../assets/dp1/sp-point.png");
const zz1Icon = require("../../assets/dp1/zz1.png");
const zz2Icon = require("../../assets/dp1/zz2.png");
const zz3Icon = require("../../assets/dp1/zz3.png");
const zz4Icon = require("../../assets/dp1/zz4.png");
const zz5Icon = require("../../assets/dp1/zz5.png");
const zz6Icon = require("../../assets/dp1/zz6.png");
const zz7Icon = require("../../assets/dp1/zz7.png");

const classCode1 = require("../../assets/incidentCenter/classCode1.png");
const classCode2 = require("../../assets/incidentCenter/classCode2.png");
const classCode3 = require("../../assets/incidentCenter/classCode3.png");
const classCode4 = require("../../assets/incidentCenter/classCode4.png");
const classCode5 = require("../../assets/incidentCenter/classCode5.png");
const classCode6 = require("../../assets/incidentCenter/classCode6.png");

import Search from "../../components/common/search.vue"; //搜索

import features from "../dp5/mapData";
import CgDetail from "./cgDetail";
import Pubsub from "../../utils/pubsub";
import {
    populationConfig,
    partyConfig,
    houseConfig,
    areaOptionData,
    allData
} from "./tableConfig";
// import bmapStyle from "./bmap-style.json";
export default {
    props: ["visible"],
    components: {
        CgDetail,
        Search
    },
    data() {
        return {
            currentTypeIndex: 0,
            circleOverlays: [], //存储画圆的数组
            exList: [
                { icon: classCode1, label: "市容环境" },
                { icon: classCode2, label: "宣传广告" },
                { icon: classCode3, label: "施工管理" },
                { icon: classCode4, label: "街面秩序" },
                { icon: classCode5, label: "突发事件" },
                { icon: classCode6, label: "其他事件" },
                { icon: spIcon, label: "天网视频" },
                { icon: zz1Icon, label: "矛盾纠纷" },
                { icon: zz2Icon, label: "扫黑除恶" },
                { icon: zz3Icon, label: "治安隐患" },
                { icon: zz4Icon, label: "民生服务" },
                { icon: zz5Icon, label: "环境卫生" },
                { icon: zz6Icon, label: "信访隐患" },
                { icon: zz7Icon, label: "随便说说" }
            ],
            czTabList: [{ label: "乡镇" }, { label: "村组" }],
            currentTabIndex: 0, //当前乡镇/村组下标
            currXzList: [], //记录当前乡镇/村组列表
            xz: "", //选择的乡镇
            bankXz: "", //备份选择的乡镇
            cz: "", //选择的村组
            isShowCz: false, //显示/隐藏选择村组
            allXzList: [
                {
                    name: "肥乡镇",
                    children: [{ name: "李家庄村" }, { name: "东北庄村" }]
                },
                {
                    name: "天台山镇",
                    children: [{ name: "赵庄村" }, { name: "李隆村" }]
                },
                {
                    name: "辛安镇镇",
                    children: [{ name: "南关村" }, { name: "南街村" }]
                },
                {
                    name: "大寺上镇",
                    children: [{ name: "西街村" }, { name: "北关村" }]
                },
                {
                    name: "东漳堡镇",
                    children: [{ name: "李家庄村" }, { name: "东北庄村" }]
                },
                {
                    name: "毛演堡镇",
                    children: [{ name: "狮子村" }, { name: "方圆村" }]
                },
                {
                    name: "元固乡",
                    children: [{ name: "平头村" }, { name: "保卫村" }]
                },
                {
                    name: "西吕营镇",
                    children: [{ name: "曹庄村" }, { name: "梁庄村" }]
                },
                {
                    name: "旧店乡",
                    children: [{ name: "牟家村" }, { name: "安顺村" }]
                }
            ],
            toolList: [
                { type: "fd", url: "fd" },
                { type: "sx", url: "sx" },
                { type: "dw", url: "dw" }
            ],
            checkList: [
                // { label: "基础数据", type: "baseData" },
                { label: "城管事件", type: "cgData" },
                { label: "综治事件", type: "zzData" },
                { label: "天网视频", type: "twData" }
            ], //checkbox列表
            checkedArr: [], //checked集合
            map: null,
            detailVisible: false,
            twVisible: false, //天网视频弹窗
            twUrl: "", //天网视频地址
            keywords: "", //搜索关键字
            populationData: [],
            partyData: [],
            houseData: [],
            activeTab: "综合信息",
            allData,
            currAreaData: {
                //乡镇详情数据
                areaNum: 0,
                populationNum: 0,
                partyNum: 0,
                houseNum: 0,
                name: ""
            },
            detailOption: [
                { label: "综合信息", type: "row" },
                {
                    label: "人口信息",
                    type: "table",
                    config: populationConfig,
                    tableData: "populationData"
                },
                {
                    label: "党员信息",
                    type: "table",
                    config: partyConfig,
                    tableData: "partyData"
                },
                {
                    label: "房屋信息",
                    type: "table",
                    config: houseConfig,
                    tableData: "houseData"
                }
            ],
            baseData: [], //基础数据
            cgData: [
                { lng: 114.749914, lat: 36.569593, icon: classCode1 },
                { lng: 114.680637, lat: 36.526451, icon: classCode2 },
                { lng: 114.789296, lat: 36.607613, icon: classCode3 },
                { lng: 114.899104, lat: 36.626615, icon: classCode4 },
                { lng: 114.908878, lat: 36.553824, icon: classCode5 },
                { lng: 114.989366, lat: 36.613175, icon: classCode6 }
            ], //城管事件
            zzData: [
                { lng: 114.819479, lat: 36.560781, icon: zz1Icon },
                { lng: 114.645567, lat: 36.552432, icon: zz2Icon },
                { lng: 114.712832, lat: 36.589533, icon: zz3Icon },
                { lng: 114.795045, lat: 36.63681, icon: zz4Icon },
                { lng: 114.875533, lat: 36.66229, icon: zz5Icon },
                { lng: 114.82954, lat: 36.584432, icon: zz6Icon },
                { lng: 114.977868, lat: 36.570057, icon: zz7Icon }
            ], //综治事件
            twData: [
                { lng: 114.801944, lat: 36.570985, icon: spIcon },
                { lng: 114.867197, lat: 36.547793, icon: spIcon },
                { lng: 114.734966, lat: 36.540139, icon: spIcon }
            ] //天网视频
        };
    },
    mounted() {
        // this.initMap();
        this.currXzList = this.allXzList;
    },
    methods: {
        /**
         *工具栏
         */
        onTool(item) {
            let { type } = item;
            this.drawingManager && this.drawingManager.close();
            if (type == "fd") {
                //放大
                this.map.zoomTo(this.map.getZoom() + 1);
            } else if (type == "sx") {
                //缩小
                this.map.zoomTo(this.map.getZoom() - 1);
            } else if (type == "dw") {
                //回到原点
                this.map.setCenter;
                let poi = new BMap.Point(114.811142, 36.602745);
                this.map.centerAndZoom(poi, 12);
            } else {
                //画圆
                this.clearAllDataOverlays();
                this.clearAllOverlays();
                this.checkedArr = [];
                this.drawCircle();
            }
        },
        drawCircle() {
            let _this = this;
            var overlaycomplete = function(e) {
                if(_this.circleOverlays.length){
                    _this.clearAllOverlays();
                    _this.clearAllDataOverlays();
                }
                console.log(e)
                let {lng,lat} = e.overlay.point;
                let arr = [
                    { type: "tw", data: [{ lng, lat, icon: spIcon }]}
                ]
                _this.batchSetMarker(arr);
                _this.circleOverlays.push(e.overlay);
                _this.drawingManager && _this.drawingManager.close();
            };
            var styleOptions = {
                strokeColor: "red", //边线颜色。
                fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
                strokeWeight: 3, //边线的宽度，以像素为单位。
                strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
                fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
                strokeStyle: "solid" //边线的样式，solid或dashed。
            };
            //实例化鼠标绘制工具
            this.drawingManager = new BMapLib.DrawingManager(this.map, {
                isOpen: true, //是否开启绘制模式
                // enableDrawingTool: true, //是否显示工具栏
                drawingType: BMAP_DRAWING_CIRCLE,
                circleOptions: styleOptions, //圆的样式
                polylineOptions: styleOptions, //线的样式
                polygonOptions: styleOptions, //多边形的样式
                rectangleOptions: styleOptions //矩形的样式
            });
            this.drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE);
            //添加鼠标绘制工具监听事件，用于获取绘制结果
            this.drawingManager.addEventListener(
                "overlaycomplete",
                overlaycomplete
            );
        },
        /**
         * 清除所有的数据的覆盖物
         */
        clearAllDataOverlays(){
            var allOverlay = this.map.getOverlays();
            allOverlay.map(s => {
                if (s.name) {
                    this.map.removeOverlay(s);
                }
            });
        },
        /**
         * 清除所有画的圆
         */
        clearAllOverlays() {
            let {circleOverlays} = this;
            for (var i = 0; i < circleOverlays.length; i++) {
                this.map.removeOverlay(circleOverlays[i]);
            }
            circleOverlays.length = 0;
        },
        search() {},
        /**
         * 类型切换事件
         */
        onCheckboxChange(item, index) {
            let arr = [];
            let c = {
                城管事件: { type: "cg", data: this.cgData },
                综治事件: { type: "zz", data: this.zzData },
                天网视频: { type: "tw", data: this.twData }
            };
            item.map(i => {
                arr.push(c[i]);
            });
            // this.map.clearOverlays();
            this.clearAllDataOverlays();
            this.clearAllOverlays();
            this.batchSetMarker(arr);
        },
        initMap() {
            // 百度地图API功能
            let _this = this;
            this.map = new BMap.Map("sjrhMap");
            var poi = new BMap.Point(114.811142, 36.602745);
            this.map.centerAndZoom(poi, 12);
            this.map.enableScrollWheelZoom();
            // function fn1() {
            //     return "#" + Math.floor(Math.random() * 0xffffff).toString(16);
            // }
            var styleOptions;
            function showPolygon() {
                var polygon;
                var pointArr = [];
                for (var i = 0; i < features.length; i++) {
                    pointArr = [];
                    for (
                        var j = 0;
                        j < features[i].geometry.coordinates[0].length;
                        j++
                    ) {
                        var bmap = new BMap.Point(
                            features[i].geometry.coordinates[0][j][0],
                            features[i].geometry.coordinates[0][j][1]
                        );
                        pointArr.push(bmap);
                    }
                    let f = features[i].properties;
                    styleOptions = {
                        strokeColor: "#d2cb2d", //随机生成边线颜色。
                        fillColor: areaOptionData[f.name].color, //随机生成填充颜色。当参数为空时，圆形将没有填充效果。
                        strokeWeight: 2, //边线的宽度，以像素为单位。
                        strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
                        fillOpacity: 0.7, //填充的透明度，取值范围0 - 1。
                        strokeStyle: "solid" //边线的样式，solid或dashed。
                    };
                    polygon = new BMap.Polygon(pointArr, styleOptions); //创建多边形
                    // polygon.name = "base"
                    polygon.addEventListener("click", function(e) {
                        console.log(e, "polygon");
                        _this.currAreaData = areaOptionData[f.name].showData;
                        _this.currAreaData.name = f.name;
                        _this.activeTab = "综合信息";
                        _this.detailVisible = true;
                    });

                    _this.map.addOverlay(polygon);

                    var centerObj = polygon.getBounds().getCenter(); //百度地图api获取的几何图形中心点存在偏差
                    //showText(new BMap.Point(centerObj.lng-0.025,centerObj.lat+0.015),features[i].properties.name);
                    let { showData, jd, wd } = areaOptionData[f.name];
                    //设置乡镇名称的另一种方式,此方式需要手动获取乡镇的中心点坐标
                    var labelPoint = new BMap.Point(jd, wd);
                    showText(
                        labelPoint,
                        areaOptionData[f.name].showData,
                        features[i].properties.name,
                        areaOptionData[f.name].color
                    );
                    // if (features[i].properties.name == "肥乡镇") {
                    //     labelPoint = new BMap.Point(114.780672,36.590924);
                    //     showText(labelPoint, areaOptionData[f.name].showData);
                    // }
                    // if (features[i].properties.name == "天台山镇") {
                    //     labelPoint = new BMap.Point(114.695584,36.540139);
                    //     showText(labelPoint,areaOptionData[f.name].showData);
                    // }
                }
            }
            function showText(point, data, name, color) {
                var opts = {
                    position: point, // 指定文本标注所在的地理位置
                    offset: new BMap.Size(0, 0) //设置文本偏移量
                };
                let { areaNum, populationNum, partyNum, houseNum } = data;
                let l = `${name}<br/>下辖村组：${areaNum}个<br/>`;
                var label = new BMap.Label(l, opts); // 创建文本标注对象
                label.setStyle({
                    color: "#333",
                    fontSize: "12px",
                    backgroundColor: "transparent",
                    borderColor: "transparent" //填充颜色。当参数为空时，圆形将没有填充效果。
                });
                label.setZIndex(0);
                _this.map.addOverlay(label);
            }
            // this.map.setMapStyle({ styleJson: bmapStyle });
            //延迟2秒，创建肥乡区地图
            setTimeout(function() {
                showPolygon();
            }, 0);
        },
        batchSetMarker(arr = []) {
            console.log(arr, "rrr");
            arr.map(item => {
                let { icon, data, type } = item;
                data.map((sItem, sIndex) => {
                    console.log(sItem.icon, "icon");
                    let opt = {
                        icon: sItem.icon,
                        lng: sItem.lng,
                        lat: sItem.lat,
                        type
                    };
                    this.setMarker(opt);
                });
            });
        },
        setMarker(opt) {
            let _this = this;
            let pt = new BMap.Point(opt.lng, opt.lat);
            var opts = {
                position: pt, // 指定文本标注所在的地理位置
                offset: new BMap.Size(0, 0) //设置文本偏移量
            };
            var marker2 = new BMap.Label("", opts); // 创建文本标注对象
            marker2.setStyle({
                background: `url(${opt.icon}) no-repeat`,
                height: "50px",
                width: "50px",
                borderColor: "transparent" //填充颜色。当参数为空时，圆形将没有填充效果。
            });
            marker2.setZIndex(999);
            // let myIcon = new BMap.Icon(opt.icon, new BMap.Size(50, 50));
            // let marker2 = new BMap.Marker(pt, { icon: myIcon }); // 创建标注
            marker2.name = opt.type;
            marker2.addEventListener("click", function(e) {
                console.log(e, opt, "opt");
                let { type } = opt;
                if (type == "tw") {
                    _this.twUrl =
                        "http://10.238.30.195:7003/xzsp/upload/img/video_20191016_114554.mp4";
                    _this.twVisible = true;
                } else if (type == "cg") {
                    Pubsub.publish("showCgDetail");
                }
            });
            this.map.addOverlay(marker2);
        },
        handleDpType(item, index) {
            this.currentIndex = index;
            if (item.path) {
                this.$router.push(item.path);
            }
        },
        /**
         * tab点击事件
         */
        tabClick(e) {
            let obj = {
                人口信息: "populationData",
                党员信息: "partyData",
                房屋信息: "houseData"
            };
            let type = obj[e.label];
            this[type] = this.allData[this.currAreaData.name][type];
            console.log(e, "tab");
        },
        getTableData(type) {
            return this[type];
        },
        onWrapperClose() {
            this.isShowCz = false;
            this.$emit("close");
        },
        /**
         * 乡镇/村组切换事件
         */
        onCzTab(index) {
            if (index == 1) {
                //选择村组
                if (this.xz) {
                    let obj = this.allXzList.find(it => {
                        return it.name == this.xz;
                    });
                    this.currXzList = obj.children;
                } else {
                    this.currXzList = [];
                }
            } else {
                //选择乡镇
                this.currXzList = this.allXzList;
            }
            this.currentTabIndex = index;
        },
        /**
         * 选择乡镇/村组
         */
        onXzList(item, index) {
            if (this.currentTabIndex) {
                //选择对应的某个村组
                this.cz = item.name;
                this.xz = this.bankXz;
                this.isShowCz = false;
            } else {
                //选择对应的某个乡镇
                setTimeout(() => {
                    this.bankXz = item.name;
                    this.currXzList = item.children;
                    this.currentTabIndex = 1;
                }, 10);
            }
        },
        /**
         * 显示/隐藏选择乡镇
         */
        selectCz() {
            this.isShowCz = !this.isShowCz;
        },
        docClick(e) {
            var btn = document.querySelector(".cz-wrapper");
            if (btn) {
                console.log(btn, !btn.contains(e.target), e.target);
                if (!btn.contains(e.target)) {
                    console.log(e.target, "ddddddd");
                    this.isShowCz = false;
                }
            }
        }
    },

    watch: {
        visible(value) {
            if (value && !this.map) {
                setTimeout(() => {
                    this.initMap();
                }, 0);
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.map-bg {
    width: 1150px;
    height: 550px;
    position: relative;

    // background: url("../../assets/dp4/middle-bg.png") no-repeat;
}
.checkbox-bg {
    // display: flex;
    // justify-content: flex-end;
    // margin-bottom: 15px;
    position: absolute;
    right: 30px;
    top: 65px;
    z-index: 1;
}
.detail-wrapper {
    max-height: 500px;
    overflow: auto;
    font-size: 12px;
}
.area-row {
    margin-bottom: 15px;
}
.search-row {
    display: flex;
    margin-bottom: 30px;
}
.input-row {
    flex: 1;
    display: flex;
    position: relative;
    input {
        flex: 1;
        font-size: 16px;
        padding-left: 20px;
        padding-right: 145px;
    }
    .search-btn-row {
        position: absolute;
        display: flex;
        align-items: center;
        right: 0;
        margin-top: 1px;
    }
    .reset-btn {
        color: #c13530;
        // padding: 20px;
        opacity: 0.8;
    }
    .search-btn {
        background: #822424;
        height: 40px;
        padding: 0 12px;
        &:active {
            opacity: 0.8;
        }
    }
    .search-input {
        height: 36px;
    }
    .search-img {
        height: 20px;
    }
}
.search-wrapper {
    width: 500px;
    position: absolute;
    left: 273px;
    top: 65px;
    z-index: 99;
}
.tool-box {
    position: absolute;
    right: 35px;
    top: 50%;
    height: 200px;
    width: 50px;
    margin-top: -100px;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tool-img-list {
    height: 32px;
    width: 32px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    cursor: pointer;
    img {
        height: 20px;
    }
}
.ex-box {
    position: absolute;
    left: 55px;
    bottom: 50px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    padding: 8px;
    z-index: 99;
    .ex-ul {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        color: #fff;
        img {
            height: 20px;
            margin-right: 5px;
        }
    }
    .ex-li {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        font-size: 12px;
    }
}

.search-input-row {
    height: 32px;
    width: 300px;
    display: flex;
    box-sizing: border-box;
    position: relative;
    input {
        flex: 1;
        padding-right: 50px;
        padding-left: 10px;
        border: 1px solid #d2d2d2;
        border-right: none;
        outline: none;

        &:focus {
            border: 1px solid #4f85e2;
            border-right: none;
        }
    }
    button {
        &:active {
            opacity: 0.8;
        }
    }
    .search-btn {
        width: 60px;
        height: 32px;
        color: #fff;
        background-color: #1a36a9;
    }
    .reset-btn {
        position: absolute;
        right: 70px;
        color: #888;
        line-height: 32px;
        height: 32px;
    }
}
.selected-cz {
    padding: 5px 26px 5px 10px;
    border: 1px solid #d2d2d2;
    position: relative;
    background: #fff;
    margin-bottom: -1px;
    z-index: 99;
    cursor: pointer;
    &:after {
        content: "";
        position: absolute;
        top: 8px;
        right: 10px;
        height: 8px;
        width: 8px;
        border-right: 1px solid #d2d2d2;
        border-bottom: 1px solid #d2d2d2;
        transform: rotate(45deg);
    }
    &.show-cz-bottom {
        border-bottom: 1px solid #fff;
    }
}
.selected-cz-ul {
    height: 100px;
    width: 400px;
    padding: 10px;
    background: #fff;
    border: 1px solid #d2d2d2;
    position: absolute;
    top: 100%;
    z-index: 9;
    opacity: 0;
    transition: 0.3s ease-in-out all;
    cursor: pointer;
    &.show-cz {
        opacity: 1;
    }
}
.selected-sub {
    // display: flex;
    border-bottom: 2px solid #1d3ba6;
}
.xz-title {
    border: 1px solid #d2d2d2;
    padding: 5px 10px;
    border-bottom: none;
    margin-right: 5px;
    font-size: 12px;
    cursor: pointer;
    background: #fff;
    &.active-tab {
        margin-bottom: -2px;
        border: 2px solid #1d3ba6;
        border-bottom: none;
    }
}
.xz-ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    padding: 10px 0;
    font-size: 12px;
    .xz-li {
        margin: 5px 0 5px 15px;
        cursor: pointer;
    }
}
.active-title {
    color: #1d3ba6;
}
.no-list {
    text-align: center;
    width: 100%;
    margin-left: 15px;
    color: #999;
}
.tool-circle {
    height: 16px;
    width: 16px;
    border: 1px solid red;
    border-radius: 100%;
}
</style>